<template>
  <view class="wrap">
     <view class="top">
     <!-- 	<picker mode="selector" :range="shopTypes" @change="onShopTypesChange">
     	  <view>玩具店</view>
        <text class="iconfont icon-xingzhuang"></text>
     	</picker> -->
      <view class="search">
        <text class="iconfont icon-sousuo"></text>
        <input placeholder="搜索商品名称" type="text" confirm-type="search" v-model="searchText" maxlength="50" @confirm="onSearch"/>
        <text class="iconfont icon-biaoqianhuashucha1" @click="clearSearchText" v-if="searchText"></text>
      </view>
     </view>
     <view class="list">
       <view class="goods" v-for="item in list" @click="toShop(item, true)">
         <view class="img-box">
           <image :src="item.pic" mode="aspectFill"></image>
         </view>
         <view class="name ellipsis-2">{{item.name}}</view>
         <view class="price">¥{{item.price}}/天</view>
         <view class="deposit">押金: {{item.deposit}}元</view>
         <button @click.stop="toShop(item)">进入店铺</button>
       </view>
     </view>
     <view class="has-more">{{payload.hasmore ? '上拉加载更多...' : '暂无更多数据'}}</view>
  </view>
</template>

<script>
  import {Goods} from '@/apis'
  import {utils, numeral} from '@/utils'
  
	export default {
		data() {
			return {
        options: {},
        isLoading: false,
				shopTypes: [],
        searchText: '',
        list: [],
        payload: {
          hasmore: true,
          current: 1,
          pageSize: 10
        }
			}
		},
		methods: {
      // 去店铺详情
      toShop (item, isDetail) {
        uni.navigateTo({
          url: `/pages/shopDetail/shopDetail?id=${item.shopId}${isDetail ? `&goodsId=${item.id}` : ''}`
        })
      },
      clearSearchText () {
        this.searchText = ''
        this.payload.hasmore = true
        this.payload.current = 1
        getList.call(this)
      },
      onSearch () {
        this.payload.hasmore = true
        this.payload.current = 1
        getList.call(this)
      }
		},
    onLoad (options) {
      this.options = options
      this.searchText = options.searchText
      getList.call(this)
    },
    onPullDownRefresh () {
      this.payload.hasmore = true
      this.payload.current = 1
      getList.call(this)
    },
    onReachBottom () {
      if(!this.payload.hasmore) return
      this.payload.current += 1
      getList.call(this)
    }
	}
  
  function getList () {
    if (this.isLoading) return
    this.isLoading = true
    uni.showLoading({
      title: '加载中...'
    })
    Goods.searchGoods({
      data: {
        query: {
          title: this.searchText.trim()
        },
        pagination: {
          current: this.payload.current,
          pageSize: this.payload.pageSize
        },
        form: {}
      }
    }).then(res => {
      if (res.data.code !== 200) {
        uni.toast({
          title: res.data.message
        })
        return
      }
      res.data.body.map(item => {
        item.pic = item.picUrls.split(',')[0]
        // 处理金钱
        item.price = numeral(item.price).divide(100).format('0.00')
        item.deposit = numeral(item.deposit).divide(100).format('0.00')
        
      })
      this.payload.hasmore = res.data.body.length === this.payload.pageSize
      this.list = this.payload.current === 1 ? res.data.body : this.list.concat(res.data.body)
      
    }).catch(err => {
      console.error(err)
    }).finally(() => {
      this.isLoading = false
      uni.hideLoading()
      uni.stopPullDownRefresh()
    })
  }
</script>

<style lang="scss">
  page {
    background-color: #FFFFFF;
  }
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  background-color: #FF4A4A;
  z-index: 10;
  picker {
    display: flex;
    color: #FFFFFF;
    font-size: 28rpx;
    flex-shrink: 0;
    view {
      display: inline;
    }
    text {
      font-size: 14rpx;
      margin-right: 20rpx;
      margin-left: 10rpx;
    }
  }
}
.search {
  flex: 1;
  height: 68rpx;
  display: flex;
  align-items: center;
  border-radius: 34rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  padding: 0 15rpx;

  input {
    font-size: 28rpx;
    flex: 1;
  }
}
.list {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0 16rpx;
  background-color: #FFF;
  margin-top: 120rpx;
  z-index: 10;
  .goods {
    position: relative;
    width: 350rpx;
    box-sizing: border-box;
    padding-bottom: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
    box-shadow:4px 6px 8px 0px rgba(0,0,0,0.32);
    &:nth-child(2n) {
      margin-right: unset;
    }
    .img-box {
      width: 350rpx;
      height: 350rpx;
      position: relative;
      image {
        width: inherit;
        height: inherit;
        background-color: #F7F7F7;
      }
    }
    .name {
      box-sizing: border-box;
      padding: 0 10rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .price {
      color: #E02020;
      font-size: 24rpx;
      box-sizing: border-box;
      padding-left: 20rpx;
    }
    .deposit {
      color: #E02020;
      font-size: 22rpx;
      padding-left: 20rpx;
    }
    button {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      box-sizing: border-box;
      width: 86rpx;
      height: 36rpx;
      background-color: #FF4A4A;
      line-height: 36rpx;
      border-radius: 18rpx;
      color: #FFFFFF;
      font-size: 16rpx;
      padding: unset;
    }
  }
}
.has-more {
  color: #999;
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
}
</style>
